<template>
	<div>
		<transition @before-enter='beforeEnter' @enter="enter" @after-enter="afterEnter">
			<div class="ball" v-show="ballflag" ref='ball'></div>
		</transition>
		<div class="mui-card">
			<swiper :lunbotuList='goodsinfo.banner'></swiper>
		</div>
		<div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价:<del>￥{{ goodsinfo.prime }}</del>&nbsp;&nbsp;销售价:<span class="now_price">￥{{ goodsinfo.now }}</span>
					</p>
					<p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsinfo.num"></numbox></p>
					<p>
						<mt-button type="primary" size='small'>立即购买</mt-button>
						<mt-button type="danger" size='small' @click='ball()'>加入购物车</mt-button>
					</p>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号：{{ goodsinfo.goods_no }}</p>
					<p>库存情况：{{ goodsinfo.num }}</p>
					<p>上架时间：{{ goodsinfo.add_time }}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size='large' class='button' @click="goDesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size='large' class='button' @click="goComment(id)">商品评论</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	import swiper from '../subcomponents/swiper.vue'
	import numbox from '../subcomponents/goodsinfo_number.vue'
	export default {
		data() {
			return {
				id: this.$route.params.index,
				goodsinfo:{},
				ballflag:false,
				selectedCount:1
			}
		},
		created() {
			this.getGoodsInfo();
		},
		methods: {
			getGoodsInfo() {
				this.$http.get('data.php').then(result => {
					if(result.body.status == true) {
						//											console.log(result.body.news_datas)
						this.goodsinfo = result.body.goods[this.id];
						console.log(this.goodsinfo);
					} else {
						Toast('获取新闻详细信息失败...');
					}
				})
			},
			goDesc(id){
				this.$router.push({name:"goodsdesc",params:{id}})
			},
			goComment(id){
				this.$router.push({name:"goodscomment",params:{id}})
			},
			ball(){
				this.ballflag = !this.ballflag;
				var goodsinfo = {
					id:this.id,
					count:this.selectedCount,
					price:this.goodsinfo.now,
					selected:true
				};
				this.$store.commit("addToCar",goodsinfo);
			},
			beforeEnter(el){
				el.style.transform = "translate(0,0)";
			},
			enter(el,done){
				el.offsetWidth;
				const ballPosition = this.$refs.ball.getBoundingClientRect();
				const badgePosition = document.getElementById('badge').getBoundingClientRect();
				const xDist = badgePosition.left - ballPosition.left;
				const yDist = badgePosition.top - ballPosition.top;
				
				el.style.transform = `translate(${xDist}px,${yDist}px)`;
				el.style.transition = 'all 1s ease';
				done()
			},
			afterEnter(el){
				this.ballflag = !this.ballflag;
			},
			getSelectedCount(count){
				this.selectedCount = count;
				console.log(this.selectedCount);
			}
		},
		components:{
			swiper,
			numbox
		},
	}
</script>

<style lang="scss" scoped>
	.now_price{
		color: red;
	}
	.mui-card-footer{
		display: block;
		.button{
			margin-top: 10px;
		}
	}
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: red;
		position: absolute;
		top: 358px;
		left: 146px;
		z-index: 55;
	}
</style>